<template>
  <div>
    <el-row class="title-bar">
      <span class="title-bar-span">扩展信息</span>
      <el-button class="title-button" icon="el-icon-edit" v-show="!is_org_edit" type="text" @click="handleOrgUpdate"
        v-hasPermi="['labdata:orgSecond:edit']"></el-button>
      <el-button class="title-button" icon="el-icon-close" v-show="is_org_edit" type="text" @click="handleOrgClose"
        ></el-button>
      <el-button class="title-button" icon="el-icon-check" v-show="is_org_edit" type="text" @click="handleOrgSubmit"
        v-hasPermi="['labdata:orgSecond:edit']"></el-button>
    </el-row>
    <el-form ref="form" :model="form" :rules="rules" >
    <table class="tb_edit">
    <tr>
      <td class="td_label">级<span style="margin-left: 25px;"></span>别:</td>
      <td class="td_text"><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.labRankOptOptions,form.labRankOpt)"></span>
       <el-form-item v-show="is_org_edit" label="" prop="labRankOpt" class="smallItem">
       <el-select  v-model="form.labRankOpt" placeholder="请选择实验室级别" size="small" class="input_w">
           <el-option
             v-for="dict in labRankOptOptions"
             :key="dict.dictValue"
             :label="dict.dictLabel"
             :value="parseInt(dict.dictValue)"
           ></el-option>
        </el-select>
        </el-form-item>
      </td>
      <td class="td_label">类<span style="margin-left: 25px;"></span>型:</td>
      <td class="td_text"><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.labTypeOptOptions,form.labTypeOpt)"></span>
        <el-form-item v-show="is_org_edit" label="" prop="labTypeOpt" class="smallItem">
          <el-select  v-model="form.labTypeOpt" placeholder="请选择实验室类型" size="small" class="input_w">
              <el-option
                v-for="dict in labTypeOptOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
           </el-select>
         </el-form-item>
      </td>
      <td class="td_label">实验室数:</td>
      <td class="td_text"><span v-text="form.labNumSum"></span>
      </td>
    </tr>
    <tr>
      <td >建筑面积:</td>
      <td ><span  v-text="form.buildAreaSum"></span>
      </td>
      <td >使用面积:</td>
      <td ><span  v-text="form.usingArea"></span>
      </td>
      <td >工作人数:</td>
      <td ><span  v-text="form.employeeNumSum"></span>
      </td>
    </tr>
    <tr>
      <td >网<span style="margin-left: 25px;"></span>址:</td>
      <td ><span v-show="!is_org_edit" v-text="form.webSite"></span>
        <el-input v-show="is_org_edit" v-model="form.webSite" placeholder="请输入网址" size="small" class="input_w"/>
      </td>
      <td >实验平台:</td>
      <td ><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.labPlatformOptOptions,form.labPlatformOpt)"></span>
        <el-form-item v-show="is_org_edit" label="" prop="labPlatformOpt" class="smallItem">
        <el-select  v-model="form.labPlatformOpt" placeholder="请选择实验平台" size="small" class="input_w">
            <el-option
              v-for="dict in labPlatformOptOptions"""
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            ></el-option>
         </el-select>
         </el-form-item>
         </td>
      <td ></td><td ></td>
    </tr>
    </table>
    </el-form>
  </div>
</template>

<script>
import {  getOrgSecond, addOrgSecond, updateOrgSecond} from "@/api/labdata/orgSecond";

export default {
  name: "OrgSecondCom",
  data() {
    return {
      currentOrg:{},
      //是否机构处于编辑状态
      form : {},
      is_org_edit: false,
      isNew : true,
      // 遮罩层
      loading: true,
      // 级别字典
      labRankOptOptions: [],
      // 类型字典
      labTypeOptOptions: [],
      // 实验平台字典
      labPlatformOptOptions: [],
      // 表单校验
      rules: {
        labRankOpt: [
          { required: true, message: "级别不能为空", trigger: "change" }
        ],
        labTypeOpt: [
          { required: true, message: "类型不能为空", trigger: "change" }
        ],
        labPlatformOpt: [
          { required: true, message: "实验平台不能为空", trigger: "change" }
        ]
      }
    };
  },
  props:{
     childOrg: {type:Object,default:()=>({})},
  },
  watch: {
    childOrg:function(newVal, oldVal){
      this.currentOrg = newVal;
      this.is_org_edit = false;
      this.getData();
    }

  },
  created() {
    this.getDicts("labRankOpt ").then(response => {
      this.labRankOptOptions = response.data;
    });
    this.getDicts("labTypeOpt").then(response => {
      this.labTypeOptOptions = response.data;
    });
    this.getDicts("labPlatformOpt").then(response => {
      this.labPlatformOptOptions = response.data;
    });
    this.currentOrg = this.childOrg;
    this.getData();
  },
  methods: {
    resetField(){
      this.form = {};
      this.resetForm("form");
    },
    /** 查询二级机构信息列表 */
    getData() {
      this.loading = true;
      getOrgSecond(this.currentOrg.orgId).then(response => {
        this.isNew = response.data == null;
       if(!this.isNew){
         this.form = response.data;
       }else{
         this.resetField();
       }
        this.loading = false;
      });
    },
    handleOrgUpdate(){
      this.is_org_edit = true;
    },
    handleOrgClose(){
      getOrgSecond(this.currentOrg.orgId).then(response => {
        this.isNew = response.data == null;
        if(!this.isNew){
            this.form = response.data;
        }else{
         this.resetField();
       }
        this.is_org_edit = false;
      });

    },
    handleOrgSubmit(){
       this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.orgId = this.currentOrg.orgId;
          if(this.isNew){
            addOrgSecond(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.is_org_edit = false;
            });
          }else{
            updateOrgSecond(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.is_org_edit = false;
            });
          }
        }
      });
    },

  }
};
</script>
<style type="text/css" lang="scss" scoped>
  .input_w{
    width: 160px;
    margin-top: -2px;
  }
  .tb_edit{
  }
  .tb_edit tr td{
    padding: 10px 5px 10px 0px;
  }
  .td_text{
    text-align: left;
    valign: middle;
    width:200px;
  }
  .td_label{
    min-width:68px;
    valign:middle;
  }
  .el-form-item{
    margin-bottom: 0px;
  }
  .el-form-item__content{
    line-height: 26px;
  }
  .el-form-item::before{
    display: none;
  }
  .el-form-item::after{
    display: none;
  }
</style>
